<template>
  <div class="tags">
    <el-tag v-for="(tag, index) in tagsStore.tags" :key="tag.icon"
            :closable="tag.name !== 'home'"
            :effect="route.name === tag.name ? 'dark' : 'plain'"
            @click="handleTag(tag)"
            @close="handleClose(tag, index)">
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { useTagsStore } from '@/store/tags'
import type { Tag } from '@/assets/type/commonType'

const tagsStore = useTagsStore()
const route = useRoute()
const router = useRouter()
const handleTag = (tag: Tag) => {
  router.push(tag.path as string)
  tagsStore.selectMenu(tag)
}
const handleClose = (tag: Tag, index: number) => {
  tagsStore.closeTag(tag)
  if (tag.name !== route.name) return
  if (index === tagsStore.tags.length){
    tagsStore.selectMenu(tagsStore.tags[index - 1])
    router.push(tagsStore.tags[index - 1].path)
  } else {
    tagsStore.selectMenu(tagsStore.tags[index])
    router.push(tagsStore.tags[index].path)
  }
}
</script>

<style lang="less" scoped>
.tags{
  margin: 20px 0 0 20px;
  .el-tag{
    margin-right: 10px;
    cursor: pointer;
  }
}
</style>